<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>孤独摇滚</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #masterVideo{
            position: absolute;
            left: 200px;
            top: 200px;
            width: 1000px;
            height: 560px;
            background-color: #000;
        }
        .btnAllBox{
            position: absolute;
            left: 1220px;
            top: 200px;
            width: 500px;
            height: 300px;
            background-color: rgba(200, 200, 200, 0.3);
            border-radius: 10px;
        }
        .oneline{
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
        }
        .btn1,
        .btn2,
        .btn3,
        .btn4,
        .btn5,
        .btn6,
        .btn7,
        .btn8,
        .btn9,
        .btn10,
        .btn11,
        .btn12{
            margin: 1%;
            width: 15%;
            height: 50%;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            border: 1px solid #fff;
            border-radius: 10px;
            cursor: pointer;
            user-select: none;
        }
        .select{
            background-color: skyblue;
            color: #fff;
        }
        .proessBox{
        /*进度条全貌*/
            position: absolute;
            left: 220px;
            top: 700px;
            width: 950px;
            height: 5px;
            background-color: red;
            display: flex;
            z-index: 2;/*最底*/
            border-radius: 10px;
        }
        #proess{
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background-color: skyblue;
            z-index: 5;/*比proessBox高一些的*/
        }
    </style>
</head>
<body>
    <div>
        <video src="http://114.115.168.109:8088/static/video/gdyg/gdyg1.mp4" 
        id="masterVideo" onclick="onPlayer()"></video>

        <div class="btnAllBox">
            <div class="oneline">
                <div class="btn1 select" onclick="onVideoBtn(1)">1</div>
                <div class="btn2" onclick="onVideoBtn(2)">2</div>
                <div class="btn3" onclick="onVideoBtn(3)">3</div>
                <div class="btn4" onclick="onVideoBtn(4)">4</div>
                <div class="btn5" onclick="onVideoBtn(5)">5</div>
                <div class="btn6" onclick="onVideoBtn(6)">6</div>
            </div>
            <div class="oneline">
                <div class="btn7" onclick="onVideoBtn(7)">7</div>
                <div class="btn8" onclick="onVideoBtn(8)">8</div>
                <div class="btn9" onclick="onVideoBtn(9)">9</div>
                <div class="btn10" onclick="onVideoBtn(10)">10</div>
                <div class="btn11" onclick="onVideoBtn(11)">11</div>
                <div class="btn12" onclick="onVideoBtn(12)">12</div>
            </div>
        </div>

        <div class="proessBox">
            <div id="proess"></div>
        </div>
    </div>
</body>
<script type="text/javascript">
const videoUrl = document.getElementById('masterVideo')
const proess = document.getElementById('proess')
const proessBox = document.querySelector('.proessBox')
const btn1 = document.querySelector('.btn1')
const btn2 = document.querySelector('.btn2')
const btn3 = document.querySelector('.btn3')
const btn4 = document.querySelector('.btn4')
const btn5 = document.querySelector('.btn5')
const btn6 = document.querySelector('.btn6')
const btn7 = document.querySelector('.btn7')
const btn8 = document.querySelector('.btn8')
const btn9 = document.querySelector('.btn9')
const btn10 = document.querySelector('.btn10')
const btn11 = document.querySelector('.btn11')
const btn12 = document.querySelector('.btn12')

const videoUrl1 = "http://114.115.168.109:8088/static/video/gdyg/gdyg1.mp4"
const videoUrl2 = "http://114.115.168.109:8088/static/video/gdyg/gdyg2.mp4"
const videoUrl3 = "http://114.115.168.109:8088/static/video/gdyg/gdyg3.mp4"
const videoUrl4 = "http://114.115.168.109:8088/static/video/gdyg/gdyg4.mp4"
const videoUrl5 = "http://114.115.168.109:8088/static/video/gdyg/gdyg5.mp4"
const videoUrl6 = "http://114.115.168.109:8088/static/video/gdyg/gdyg6.mp4"
const videoUrl7 = "http://114.115.168.109:8088/static/video/gdyg/gdyg7.mp4"
const videoUrl8 = "http://114.115.168.109:8088/static/video/gdyg/gdyg8.mp4"
const videoUrl9 = "http://114.115.168.109:8088/static/video/gdyg/gdyg9.mp4"
const videoUrl10 = "http://114.115.168.109:8088/static/video/gdyg/gdyg10.mp4"
const videoUrl11 = "http://114.115.168.109:8088/static/video/gdyg/gdyg11.mp4"
const videoUrl12 = "http://114.115.168.109:8088/static/video/gdyg/gdyg12.mp4"


const onPlayer = async() => {
    if(videoUrl.paused){
        videoUrl.play()
    }else{
        videoUrl.pause()
    }
}

const onVideoBtn = async(num) => {
    switch(num){
        case 1:
            videoUrl.src=videoUrl1;
            btn1.classList.add('select');
            btn2.classList.remove('select');
            btn3.classList.remove('select');
            btn4.classList.remove('select');
            btn5.classList.remove('select');
            btn6.classList.remove('select');
            btn7.classList.remove('select');
            btn8.classList.remove('select');
            btn9.classList.remove('select');
            btn10.classList.remove('select');
            btn11.classList.remove('select');
            btn12.classList.remove('select');
            break;
        case 2:
            videoUrl.src=videoUrl2;
            btn1.classList.remove('select');
            btn2.classList.add('select');
            btn3.classList.remove('select');
            btn4.classList.remove('select');
            btn5.classList.remove('select');
            btn6.classList.remove('select');
            btn7.classList.remove('select');
            btn8.classList.remove('select');
            btn9.classList.remove('select');
            btn10.classList.remove('select');
            btn11.classList.remove('select');
            btn12.classList.remove('select');
            break;
        case 3:
            videoUrl.src=videoUrl3;
            btn1.classList.remove('select');
            btn2.classList.remove('select');
            btn3.classList.add('select');
            btn4.classList.remove('select');
            btn5.classList.remove('select');
            btn6.classList.remove('select');
            btn7.classList.remove('select');
            btn8.classList.remove('select');
            btn9.classList.remove('select');
            btn10.classList.remove('select');
            btn11.classList.remove('select');
            btn12.classList.remove('select');
            break;
        case 4:
            videoUrl.src=videoUrl4;
            btn1.classList.remove('select');
            btn2.classList.remove('select');
            btn3.classList.remove('select');
            btn4.classList.add('select');
            btn5.classList.remove('select');
            btn6.classList.remove('select');
            btn7.classList.remove('select');
            btn8.classList.remove('select');
            btn9.classList.remove('select');
            btn10.classList.remove('select');
            btn11.classList.remove('select');
            btn12.classList.remove('select');
            break;
        case 5:
            videoUrl.src=videoUrl5;
            btn1.classList.remove('select');
            btn2.classList.remove('select');
            btn3.classList.remove('select');
            btn4.classList.remove('select');
            btn5.classList.add('select');
            btn6.classList.remove('select');
            btn7.classList.remove('select');
            btn8.classList.remove('select');
            btn9.classList.remove('select');
            btn10.classList.remove('select');
            btn11.classList.remove('select');
            btn12.classList.remove('select');
            break;
        case 6:
            videoUrl.src=videoUrl6;
            btn1.classList.remove('select');
            btn2.classList.remove('select');
            btn3.classList.remove('select');
            btn4.classList.remove('select');
            btn5.classList.remove('select');
            btn6.classList.add('select');
            btn7.classList.remove('select');
            btn8.classList.remove('select');
            btn9.classList.remove('select');
            btn10.classList.remove('select');
            btn11.classList.remove('select');
            btn12.classList.remove('select');
            break;
        case 7:
            videoUrl.src=videoUrl7;
            btn1.classList.remove('select');
            btn2.classList.remove('select');
            btn3.classList.remove('select');
            btn4.classList.remove('select');
            btn5.classList.remove('select');
            btn6.classList.remove('select');
            btn7.classList.add('select');
            btn8.classList.remove('select');
            btn9.classList.remove('select');
            btn10.classList.remove('select');
            btn11.classList.remove('select');
            btn12.classList.remove('select');
            break;
        case 8:
            videoUrl.src=videoUrl8;
            btn1.classList.remove('select');
            btn2.classList.remove('select');
            btn3.classList.remove('select');
            btn4.classList.remove('select');
            btn5.classList.remove('select');
            btn6.classList.remove('select');
            btn7.classList.remove('select');
            btn8.classList.add('select');
            btn9.classList.remove('select');
            btn10.classList.remove('select');
            btn11.classList.remove('select');
            btn12.classList.remove('select');
            break;
        case 9:
            videoUrl.src=videoUrl9;
            btn1.classList.remove('select');
            btn2.classList.remove('select');
            btn3.classList.remove('select');
            btn4.classList.remove('select');
            btn5.classList.remove('select');
            btn6.classList.remove('select');
            btn7.classList.remove('select');
            btn8.classList.remove('select');
            btn9.classList.add('select');
            btn10.classList.remove('select');
            btn11.classList.remove('select');
            btn12.classList.remove('select');
            break;
        case 10:
            videoUrl.src=videoUrl10;
            btn1.classList.remove('select');
            btn2.classList.remove('select');
            btn3.classList.remove('select');
            btn4.classList.remove('select');
            btn5.classList.remove('select');
            btn6.classList.remove('select');
            btn7.classList.remove('select');
            btn8.classList.remove('select');
            btn9.classList.remove('select');
            btn10.classList.add('select');
            btn11.classList.remove('select');
            btn12.classList.remove('select');
            break;
        case 11:
            videoUrl.src=videoUrl11;
            btn1.classList.remove('select');
            btn2.classList.remove('select');
            btn3.classList.remove('select');
            btn4.classList.remove('select');
            btn5.classList.remove('select');
            btn6.classList.remove('select');
            btn7.classList.remove('select');
            btn8.classList.remove('select');
            btn9.classList.remove('select');
            btn10.classList.remove('select');
            btn11.classList.add('select');
            btn12.classList.remove('select');
            break;
        case 12:
            videoUrl.src=videoUrl12;
            btn1.classList.remove('select');
            btn2.classList.remove('select');
            btn3.classList.remove('select');
            btn4.classList.remove('select');
            btn5.classList.remove('select');
            btn6.classList.remove('select');
            btn7.classList.remove('select');
            btn8.classList.remove('select');
            btn9.classList.remove('select');
            btn10.classList.remove('select');
            btn11.classList.remove('select');
            btn12.classList.add('select');
            break;
        default:break
    }
}
videoUrl.ontimeupdate = () => {

    proess.style.width = myVideo.currentTime/myVideo.duration*100 + '%'
}

proessBox.onmousedown = (event)=>{
    let len = event.pageX - proessBox.offsetLeft
    let percent = len / proessBox.offsetWidth;
    // console.log(percent)
    proess.style.width = percent * (proessBox.offsetWidth) - 2 + "px";
    videoUrl.currentTime = percent * videoUrl.duration;
}


</script>
</html>